<template>
  <div id="">
    <div style="width: 400px">

      <el-form style="text-align: left" :model="searchMsg" status-icon ref="searchFrom"
               label-width="100px">
        <el-form-item label="商品名称" prop="gname">
          <el-input v-model="searchMsg.gname"></el-input>
        </el-form-item>
        <el-form-item label="价格区间" prop="gprice">
          <el-slider
              v-model="searchMsg.priceRange"
              range
              :step="100"
              :max="20000">
          </el-slider>
        </el-form-item>
        <el-form-item label="商品状态" prop="gstatu">
          <el-radio v-model="searchMsg.gstatu" label="1">在售</el-radio>
          <el-radio v-model="searchMsg.gstatu" label="0">下架</el-radio>
        </el-form-item>
        <br>
        <el-form-item>
          <el-button type="primary" @click="search()">搜索</el-button>
          <el-button @click="restSearch()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: left">
      <el-button type="danger" @click="removeSelect()">删除选中</el-button>
      <el-button type="success" @click="podAddMenu()">添加一个</el-button>
    </div>
    <el-table
        ref="multipleTable"
        :data="goodsMsgs"
        tooltip-effect="dark"
        style="width: 100%"
        border
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          label="预览图"
          width="140">
        <template slot-scope="scope">
          <img :src="scope.row.gimg" width="120px" height="120px">
        </template>
      </el-table-column>
      <el-table-column
          prop="gname"
          label="商品名称"
      >
      </el-table-column>
      <el-table-column
          label="商品描述"
          width="180px"
      >
        <template slot-scope="scope">
          <el-popover
              placement="bottom"
              title="描述"
              width="130px"
              trigger="click"
              :content="scope.row.gdes">
            <el-button slot="reference">{{ scope.row.gname }}</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          prop="gprice"
          label="价格"
      >
        <template slot-scope="scope">
          <div
              v-if="scope.row.serDiscount==null || Date.parse(new Date().toDateString())>=Date.parse(scope.row.serDiscount.gdend)">
            ￥{{ scope.row.gprice }}
          </div>
          <div v-else>
            <p>
              ￥{{ scope.row.gprice - scope.row.serDiscount.discount }}
              <span
                  style="
                text-decoration: line-through;
                font-size: 12px;
                color: #ccc;
              "
              >￥{{ scope.row.gprice }}</span
              >
            </p>

          </div>
        </template>
      </el-table-column>
      <el-table-column
          prop="gnub"
          label="库存"
      >
      </el-table-column>
      <el-table-column
          label="上架状态"
      >
        <template slot-scope="scope">
          <el-switch
              style="display: block"
              v-model="scope.row.gstatu"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="2"
              disabled
              active-text="在售"
              inactive-text="下架">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="350px"
      >
        <template slot-scope="scope">
          <el-button @click="popModifyMenu(scope.row.gid)" type="primary" size="small">编辑</el-button>
          <el-button
              v-if="scope.row.serDiscount==null || Date.parse(new Date().toDateString())>=Date.parse(scope.row.serDiscount.gdend)"
              @click="popDiscount(scope.row)" type="success" size="small">促销
          </el-button>
          <el-button @click="removeOne(scope.row.gid)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3,5,10,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--    修改-->
    <el-dialog
        title="修改"
        :visible.sync="modifyFlag"
        width="30%"
        :before-close="handleClose">
      <el-form :model="goodsMsg" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="手机预览图" prop="gimg">
          <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:8081/Util/FileUpload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" width="260px" height="260px">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="货物名称" prop="gname">
          <el-input v-model="goodsMsg.gname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="货物描述" prop="gdes">
          <el-input v-model="goodsMsg.gdes" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="货物库存" prop="gnub">
          <el-input v-model="goodsMsg.gnub" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="货物单价" prop="gprice">
          <el-input v-model="goodsMsg.gprice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="货物状态" prop="gstatu">
          <el-switch
              style="display: block"
              v-model="goodsMsg.gstatu"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="2"
              active-text="在售"
              inactive-text="下架">
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="modify('userMsg')">提交</el-button>
          <el-button @click="resetForm('userMsg')">重置</el-button>
          <el-button @click="modifyFlag = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--    添加日志信息-->
    <el-dialog
        title="修改"
        :visible.sync="discountFlag"
        width="30%">
      <el-form :model="discountMsg" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="货物id" prop="gid">
          <el-input disabled v-model="discountMsg.gid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="减免消息" prop="dicmsg">
          <el-input v-model="discountMsg.dicmsg" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="促销减免" prop="discount">
          <el-input v-model="discountMsg.discount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="gdstart">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="discountMsg.gdstart"
                type="datetime"
                placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="结束时间" prop="gdend">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="discountMsg.gdend"
                type="datetime"
                placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addDiscount('userMsg')">提交</el-button>
          <el-button @click="modifyFlag = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--    添加-->
    <el-dialog
        title="添加"
        :visible.sync="addFlag"
        width="30%"
        :before-close="handleClose">
      <el-form :model="addGoodsMsg" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="手机预览图" prop="gimg">
          <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:8081/Util/FileUpload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" width="260px" height="260px">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="货物名称" prop="gname">
          <el-input v-model="addGoodsMsg.gname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="货物描述" prop="gdes">
          <el-input v-model="addGoodsMsg.gdes" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="货物库存" prop="gnub">
          <el-input v-model="addGoodsMsg.gnub" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="货物单价" prop="gprice">
          <el-input v-model="addGoodsMsg.gprice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="货物状态" prop="gstatu">
          <el-switch
              style="display: block"
              v-model="addGoodsMsg.gstatu"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="2"
              active-text="在售"
              inactive-text="下架">
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add('userMsg')">提交</el-button>
          <el-button @click="resetForm('userMsg')">重置</el-button>
          <el-button @click="addFlag = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import Im from "@/views/service/chatser";
import {h} from "vue";

export default {
  name: "usermenu",
  components: {Im},
  data() {
    return {
      // 用户数据
      goodsMsgs: [],
      // 选择框数据
      multipleSelection: [],
      // 分页数据
      pageIndex: 1,
      pageSize: 5,
      total: 0,
      // 修改的标记
      modifyFlag: false,
      // 添加促销的标记
      discountFlag: false,
      // 添加的标记
      addFlag: false,
      // 分配角色的标记
      roleFlag: false,
      // 要被添加的用户信息
      goodsMsg: {},
      discountMsg: {},
      //
      addGoodsMsg: {},
      // 临时保存的用户id
      tempUserId: 0,
      // 搜索的条件
      searchMsg: {
        gname: "",
        priceRange: [0, 20000],
        gstatu: 1
      },
      // 头像图片的url信息
      imageUrl: "",
    };
  },
  // 页面初始化方法
  created() {
    this.flushPage()
  },
  methods: {
    // 复选框的方法
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 当角色选取框发生改变的时候
    roleSelectionChange(val) {
      this.roleMultipleSelection = val;
    },
    // 分页的方法，当页面大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.flushPage()
    },
    // 当页面下标改变
    handleCurrentChange(val) {
      this.pageIndex = val
      this.flushPage()
    },
    // 删除这条记录
    removeOne(id) {
      let ids = []
      ids.push(id)
      this.removeBeach(ids)
    },
    // 添加一条促销记录
    popDiscount(row) {
      this.discountMsg.gid = row.gid
      this.discountFlag = true
    },
    addDiscount(){
      this.$http.post("/Discount/Add",this.discountMsg).then(resp=>{
        if (resp.data.code===2000){
          this.flushPage()
          this.discountFlag=false;
          // 消息通知
          this.$notify({
            title: "消息",
            message: h("i", {style: "color: teal"}, resp.data.msg),
            duration: 4000
          })

          // 刷新页面
        }
      })
    },
    // 删除选中
    removeSelect() {
      let ids = []
      this.multipleSelection.forEach(row => {
        ids.push(row.gid)
      })
      this.removeBeach(ids)
    },
    // 批量删除记录
    removeBeach(ids) {
      const h = this.$createElement
      // 发送请求
      if (ids.length <= 0) {
        this.$notify.error({
          title: '错误',
          message: '请至少选中一个用户删除！'
        });
        return;
      }
      this.$http.post("/Goods/Remove", ids).then(resp => {
        if (resp.data.code === 2000) {
          // 消息通知
          this.$notify({
            title: "消息",
            message: h("i", {style: "color: teal"}, resp.data.msg),
            duration: 4000
          })
          // 刷新页面
          this.flushPage()
        }
      })
    },
    // 弹出修改
    popModifyMenu(id) {
      this.$http.get("Goods/GetMsg/" + id).then(resp => {
        this.goodsMsg = resp.data.data
        this.goodsMsg.pwd = ""
        this.imageUrl = resp.data.data.gimg
      })
      this.modifyFlag = true
    },
    // 弹出添加
    podAddMenu() {
      this.imageUrl = ""
      this.addFlag = true
    },
    // 重置该用户的密码
    restPwd(uid) {
      this.$http.get("Customer/RestPwd/" + uid).then(resp => {
        if (resp.data.code === 2000) {
          this.$notify({
            title: '成功',
            message: '用户的密码重置成功！默认为123456',
            type: 'success'
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '密码重置失败'
          });
        }
      })
    },
    // 修改用户信息
    modify() {
      this.goodsMsg.headurl = this.imageUrl
      this.$http.post("/Goods/Modify", this.goodsMsg).then(resp => {
        console.log(this.goodsMsg)
        if (resp.data.code === 2000) {
          this.$notify({
            title: "消息",
            message: "更新成功",
            duration: 4000
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: '更新失败'
          });
        }
      })
      this.handleClose()
      this.flushPage()
    },
    add() {
      this.addGoodsMsg.gimg = this.imageUrl
      this.$http.post("/Goods/Add", this.addGoodsMsg).then(resp => {
        console.log(this.goodsMsg)
        if (resp.data.code === 2000) {
          this.$notify({
            title: "消息",
            message: "插入成功",
            duration: 4000
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: '插入失败'
          });
        }
      })
      this.handleClose()
      this.flushPage()
    },
    // 对话框关闭之后
    handleClose() {
      this.$nextTick(() => {
        this.$refs['ruleForm'].resetFields();
      })
      this.addFlag = false
      this.modifyFlag = false
    },
    resetForm() {
      this.$nextTick(() => {
        this.$refs['ruleForm'].resetFields();
      })
    },
    // 重置搜索菜单
    restSearch() {
      this.$nextTick(() => {
        this.$refs['searchFrom'].resetFields();
      })
    },
    // 执行搜索方法
    search() {
      this.$http.post("/Goods/GetGoods", this.searchMsg).then(resp => {
        this.goodsMsgs = resp.data.data
      })
    },
    // 刷新页面的方法
    flushPage() {
      // 获取全部的用户信息
      this.$http.get("/Goods/List/" + this.pageIndex + "/" + this.pageSize).then(resp => {
        console.log(resp.data.data)
        // 放入用户信息
        this.goodsMsgs = resp.data.data.records;
        // 放入分页数据
        this.total = resp.data.data.total
      })
    },
    // 图片上传工具方法
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  }
}

</script>

<style scoped>

</style>
